<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .link-button {
            color: white;
            text-decoration: none;
            background-color: #90ee90;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        .link-button:hover {
            background-color: #7cb342;
        }
        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
        p{
            color: #8c939d;
            margin: 0;
        }
        a{
            text-decoration: none;
            color: #8c939d;
        }
        .header{
            margin-bottom: 20px;
        }
        .header{
            background-color:#eeeeee;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .footer {
            background-color: #f5f5f5;
            padding: 20px 0;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 610px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-links a {
            text-decoration: none;
            color: #333;
            margin-right: 20px;
        }

        .footer-links a:hover {
            color: #007bff;
        }

        .footer-contact {
            display: flex;
            align-items: center;
        }

        .footer-contact i {
            margin-right: 5px;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    &nbsp;
                </div>
            </el-col>
            <el-col :span="4">
                <div>
                    &nbsp;
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content" style="margin-top: 4px" v-if="!isLogin">
                    <p style="position: relative;left: 200px;color: orange">admin</p> <!-- 移除了双花括号 -->
                </div>
                <div class="grid-content" style="margin-top: 4px" v-else>
                    您好，
                    <a href="log_in.html">请登录</a>
                    <a href="sign_in.html">免费注册</a>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content " style="margin-top: 4px;background-color:#eeeeee;">
                    <a href="orders.html" style="color: #eeeeee;" >|| 论坛首页 ||</a>&nbsp;
                    <a href="center.html" style="color: #eeeeee;">个人中心 ||</a>&nbsp;
                    <a href="guide.html" style="color: #eeeeee;">萌新指南 ||</a>&nbsp;
                    <a href="about.html" style="color: #eeeeee;">关于我们 ||</a>&nbsp;
                    <a href="log_in.html" >退出登录 ||</a>&nbsp;
                </div>
            </el-col>
        </el-row>
    </div>

    <div class="header2" style="margin: 0 200px">
        <el-row :gutter="20">
            <el-col :span="4"><div class="grid-content " style="position:relative;top: -17px">
                <img src="logo/logo.png" alt="#"
                     width="250px"
                     height="150px"
                     style="position: relative;right: 20px">

            </div></el-col>

            <el-col :span="18"><div class="grid-content ">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
                    <el-menu-item index="1">总数据</el-menu-item>

                    <!--                    <el-menu-item index="8"><a href="https://www.ele.me" target="_blank">五金器件</a></el-menu-item>-->
                </el-menu>
                <div class="line"></div>
            </div></el-col>
        </el-row>
    </div>
    <div class="sy" style="display: flex;margin: 0 200px">

        <div class="sy2">

            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
            </el-radio-group>
            <el-menu default-active="changeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="changeProducts">

                <el-menu-item index="1" name="首页">
                    <i class="el-icon-s-open"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" name="用户管理">
                    <i class="el-icon-monitor"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="3" name="论坛管理">
                    <i class="el-icon-ship"></i>
                    <span slot="title">论坛管理</span>
                </el-menu-item>




            </el-menu>

        </div>
        <div class="sy1" style="flex: 1">


            <!-- 在两个div之间插入iframe -->
            <div style="flex: 1;">
                <iframe :src="url" frameborder="0" width="100%" height="800px"></iframe>
            </div>
        </div>

    </div>



    <footer class="footer">
        <div class="footer-content">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">常见问题</a>
                <a href="#">隐私政策</a>
            </div>
            <div class="footer-contact">
                <i class="fas fa-phone"></i>
                <span>联系电话: 123456789</span>
            </div>
        </div>
    </footer>

</div>



<script>
    new Vue({
        el:'#app',
        mounted(){
            this.thefirst();
        },
        data:{
            activeIndex: '1',
            changeIndex: '',
            isCollapse: false,
            input3: '',
            select: '1',
            url: "tb_all.html",
            name: '',
            userid:'',
            username: '',
            isLogin: false,
        },
        methods:{
            thefirst(){
                // 在index.html页面加载时读取
                this.userid = getCookie("userId");
                this.username = getCookie("username");
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                this.$message({
                    message: '欢迎'+'admin',
                    type: 'success'
                });
            },
            changeProducts(index){
                // 处理菜单选择事件
                this.changeIndex = index;
                this.url = 'tb_all.html';
                if (this.changeIndex ==2 ){
                    this.url = 'tb_user.html';
                }
                if (this.changeIndex ==3 ){
                    this.url = 'tb_bar.html';
                }
                console.log(this.changeIndex);
                console.log(this.url);
            },
            refreshPage() {
                window.location.reload();
            },
            handleSelect(index) {
                // 处理菜单选择事件
                this.activeIndex = index;
                console.log(this.activeIndex); // 输出 index 变量
                if (this.activeIndex ==1 ){
                    this.url = 'tb_all.html';
                }
                console.log(this.url);

            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
        },

    })
</script>
</body>
</html>